import {
  View,
  Text,
  Image,
  StyleSheet,
  TextInput,
  StatusBar,
  Button,
  Pressable,
  TouchableOpacity,
  ToastAndroid,
} from 'react-native';
import React, {useState} from 'react';
import {
  fontSizeBase,
  grayLighter,
  spacingColLg,
  themeColorDark,
} from '../style';

export default function Login() {
  //状态变量 —— 按钮的背景颜色
  let [btnBgColor, setBtnBgColor] = useState('#090');
  //状态变量 —— 手机号码
  let [phone, setPhone] = useState('13501234567');
  //状态变量 —— 登录密码
  let [upwd, setUpwd] = useState('123456');

  //单击登录按钮时，执行登录验证
  let doLogin = async () => {
    //1.验证手机号格式是否合法
    if (!/^1[3-9]\d{9}$/.test(phone)) {
      // console.log(ToastAndroid.SHORT);   //0
      // console.log(ToastAndroid.LONG);    //1
      //弹出一个吐司对话框，持续时间大约3000毫秒
      ToastAndroid.show('手机号格式错误', ToastAndroid.LONG);
      return;
    }
    //2.验证登录密码格式是否合法
    if (!/^\w{6,18}$/.test(upwd)) {
      ToastAndroid.show('密码格式错误', ToastAndroid.LONG);
      return;
    }
    //3.发起服务器端异步请求 —— POST
    let url = 'https://www.codeboy.com/zhsqapi/user/login';
    let options = {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({phone: phone, pwd: upwd}),
    };
    //向指定的URL地址“抓取”响应消息
    let res = await fetch(url, options);
    //读取响应消息主体，完成后再使用JSON.parse()解析主体
    let data = await res.json();
    console.log(data);
  };
  return (
    <View style={ss.content}>
      {/* F0：系统状态栏 */}
      <StatusBar backgroundColor={themeColorDark} />

      {/* F1：顶部LOGO图片 */}
      <Image style={ss.logo} source={require('../img/logo.png')} />

      {/* F2：手机号输入框组 */}
      <View style={ss.inputGroup}>
        <TextInput
          value={phone}
          onChangeText={txt => setPhone(txt)}
          style={ss.input}
          placeholder="请输入手机号"
        />
        {/* 输入框左侧的图标(书写在文本框后面，可以压在文本框上方) */}
        <Image style={ss.iconLeft} source={require('../img/cellphone.png')} />
        {/* 输入框右侧的图标 */}
        <Image style={ss.iconRight} source={require('../img/error.png')} />
      </View>

      {/* F3：密码输入框组 */}
      <View style={[ss.inputGroup, {marginTop: spacingColLg * 2}]}>
        <TextInput
          value={upwd}
          onChangeText={txt => setUpwd(txt)}
          secureTextEntry={true}
          style={ss.input}
          placeholder="请输入密码"
        />
        {/* 输入框左侧的图标(书写在文本框后面，可以压在文本框上方) */}
        <Image style={ss.iconLeft} source={require('../img/lock.png')} />
        {/* 输入框右侧的图标 */}
        <Image style={ss.iconRight} source={require('../img/eye-close.png')} />
      </View>

      {/* F4：登录按钮 */}
      {/* RN组件中Button不能放置innerText（只有Text可以） */}
      {/* RN组件没有通用属性，例如：Button就没有style属性 */}
      {/* <Button title="登录" color="#090" style={{width: 200, marginTop: 50}} /> */}
      {/* 使用Pressable组件为Text提供“按压开始和结束”事件*/}
      <Pressable
        style={{width: '80%'}}
        onPressIn={_ => setBtnBgColor('#080')}
        onPressOut={_ => setBtnBgColor('#090')}
        onPress={doLogin}>
        <Text style={[ss.btn, {backgroundColor: btnBgColor}]}>登 录</Text>
      </Pressable>

      {/* F5：忘记密码  */}
      {/* 添加按压反馈：触摸后不透明度改变 */}
      <TouchableOpacity activeOpacity={0.6}>
        <Text style={ss.findPwd}>忘记密码</Text>
      </TouchableOpacity>
    </View>
  );
}

//组件内部专用样式对象
let ss = StyleSheet.create({
  content: {
    //弹性容器中的子元素在交叉轴上对齐：居中
    alignItems: 'center',
  },
  logo: {
    //RN中的display取值只有flex或none
    // display: 'block',
    //RN中没有任何样式是“复合值”
    // margin: '0 auto',
    //水平margin = ml + mr
    // marginHorizontal: 'auto',
    marginTop: 120,
    //默认情况下，宽高比不会等比例缩放
    width: 280,
    height: 280,
  },
  inputGroup: {
    //定位方式：相对定位，为小图标提供参照物
    position: 'relative',
    marginTop: 40,
    width: '80%',
    //弹性容器中的子元素在主轴方向上竖直居中
    justifyContent: 'center',
  },
  input: {
    backgroundColor: grayLighter,
    borderColor: themeColorDark,
    borderWidth: 1,
    borderStyle: 'solid',
    width: '100%',
    borderRadius: 5,
    //水平方向上的边距 = pl+pr
    paddingHorizontal: 40,
    fontSize: fontSizeBase,
  },
  iconLeft: {
    //绝对定位的小图标
    position: 'absolute',
    left: 6,
    // top: '50%',
    // marginTop: -16,
    width: 32,
    height: 32,
  },
  iconRight: {
    position: 'absolute',
    width: 22,
    height: 22,
    right: 12,
  },
  btn: {
    // backgroundColor: themeColorDark,
    marginTop: spacingColLg * 3,
    color: '#fff',
    //上下方向上的padding
    paddingVertical: spacingColLg,
    textAlign: 'center',
    fontSize: fontSizeBase,
    borderRadius: 5,
  },
  findPwd: {
    color: themeColorDark,
    fontSize: fontSizeBase,
    marginTop: spacingColLg * 2,
  },
});
